<template>
  <div class="water" ref="warpper">
    <div>
      <div class="item-contant" v-for="(item,index) in list" :key="index">
        <div class="left">
          <div class="title">微信充值</div>
          <div class="time">{{item.createtime}}</div>
        </div>
        <div class="right">
          <div :class="item.status==0?'type':'type1'">{{item.status==0?'未支付':'已支付'}}</div>
          <div>￥{{item.price}}</div>
        </div>
      </div>
    </div>
    <div class="nothing-box" v-if="list.length<=0">
      <img :src="nothing" alt>
      <div class="text">暂无充值记录</div>
    </div>
  </div>
</template>

<style lang="less" scoped>
@import "index.less";
</style>

<script>
import { mapActions } from "vuex";
import BScroll from "better-scroll";

export default {
  name: "Pay",
  data() {
    return {
      nothing: require("../../assets/nothing.png"),
      page: 1,
      list: {},
      listScroll: {}, // 滑块
      lock: false
    };
  },
  created() {
    this.change(false);
    this.getlist();
  },
  methods: {
    ...mapActions("Home", ["change"]),
    getlist() {
      this.$dialog.loading.open("正在加载");
      this.$http
        .get("/credit/Userlist", {
          params: {
            page: this.page
          }
        })
        .then(res => {
          this.list = res.data.data;
          this.scrollInit();
          this.$dialog.loading.close();
        });
    },
    scrollInit() {
      this.listScroll = new BScroll(this.$refs.warpper, {
        click: true,
        pullUpLoad: {
          threshold: -50
        }
      });
      // 上拉加载更多
      this.listScroll.on("pullingUp", () => {
        if (this.lock) {
          return;
        }
        // 页数加一
        this.page++;
        // 锁定防止多次加载
        this.lock = true;
        this.$dialog.loading.open("正在加载");
        this.$http
          .get("/credit/Userlist", {
            params: {
              page: this.page
            }
          })
          .then(res => {
            // 请求回来的数据相加
            this.list = this.list.concat(res.data.data);
            if (res.data.data.length <= 0) {
              this.$dialog.toast({
                mes: "没有更多的数据",
                timeout: 1500,
                icon: "none"
              });
              this.lock = true;
            } else {
              // 解锁上拉
              this.lock = false;
            }
            this.$forceUpdate();
            this.listScroll.finishPullUp();
            this.listScroll.refresh();
            this.$dialog.loading.close();
          });
      });
    }
  },
  components: {}
};
</script>
